<template>
  <view class="container">
    <image class="banner" src="/static/svg/practice.svg" mode="widthFix"></image>
    <view v-if="loading" class="loading"><text>加载中...</text></view>
    <view v-else>
      <view v-if="papers.length === 0" class="empty"><text>暂无试卷</text></view>
      <view v-else>
        <uni-card v-for="item in papers" :key="item.id" :is-shadow="true" margin="12px 0">
          <view class="paper-item">
            <view class="paper-info">
              <text class="paper-title">{{ item.name }}</text>
              <text class="paper-sub">共 {{ item.count }} 题</text>
            </view>
            <view class="paper-status">
              <text v-if="item.completed" class="tag-done">已完成</text>
              <text v-else class="tag-todo">未完成</text>
            </view>
            <view class="paper-actions">
              <button class="btn btn-primary" @tap="startExam(item)">开始答题</button>
              <view v-if="item.completed" class="score">{{ item.score }}/{{ item.count }}</view>
            </view>
          </view>
        </uni-card>
      </view>
    </view>
  </view>
  </template>

<script>
import { get } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: false,
      papers: [],
      allQuestions: []
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      try {
        const data = await get('/practice/questions')
        this.allQuestions = Array.isArray(data) ? data : []
        try { uni.setStorageSync('cached_questions', this.allQuestions) } catch(e) {}
      } catch(e) {
        try { this.allQuestions = uni.getStorageSync('cached_questions') || [] } catch(err) { this.allQuestions = [] }
      }
      const size = 100
      const total = this.allQuestions.length
      const count = Math.ceil(total / size)
      const list = []
      for (let i = 0; i < count; i++) {
        const start = i * size
        const end = Math.min(start + size, total)
        const id = 'paper-' + (i + 1)
        const name = '试卷' + (i + 1)
        let completed = false
        let score = 0
        try {
          const result = uni.getStorageSync('paper_result_' + id)
          if (result && result.completed) { completed = true; score = result.score || 0 }
        } catch(e) {}
        list.push({ id, name, index: i + 1, start, end, count: end - start, completed, score })
      }
      this.papers = list
      this.loading = false
    },
    startExam(item) {
      const query = `paperIndex=${item.index}&paperId=${item.id}`
      uni.navigateTo({ url: `/pages/exam/index?${query}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';
.container { min-height: 100vh; background-color: #F9FAFB; padding: 10px; }
.loading, .empty { text-align: center; padding: 40px 20px; color: #999; }
.paper-item { display: flex; align-items: center; gap: 12px; }
.paper-info { flex: 1; }
.paper-title { font-size: 16px; color: #333; font-weight: 600; display: block; }
.paper-sub { font-size: 12px; color: #999; display: block; margin-top: 4px; }
.paper-status { width: 80px; text-align: right; }
.tag-done { color: #20B2AA; }
.tag-todo { color: #FF7F50; }
.paper-actions { display: flex; align-items: center; gap: 8px; }
.btn { padding: 8px 14px; border: none; border-radius: 8px; }
.btn-primary { }
.score { color: #FF7F50; font-weight: 600; }
</style>